React Server Components
まあそんなことはなくて、Next.jsのgetServerSidePropsをReact本体の視点で実現したって感じかな getServerSidePropsと比べると、
データの取得がルート遷移に制限されないので柔軟
GraphQLの持つデータ集約と同等のことをするにはRESTなAPIでは難しいので、何かしらをサーバーサイドでやる必要があるが、データ取得とコンポーネントを結びつけたいので描画そのものをサーバーサイドでやる。 そうするとクライアントサイドのバンドルに含める必要がないコンポーネントが出てきて、これを外すことでZero-Bundleを実現する
0ではないだろ
確かに管理画面とか作るのにめっちゃ便利だ
サンプルを動かしてみた
code:response
M1:{"id":"./src/SearchField.client.js","chunks":"client5","name":""} M2:{"id":"./src/EditButton.client.js","chunks":"client1","name":""} S3:"react.suspense"
J0:["$","div",null,{"className":"main","children":"$","section",null,{"className":"col sidebar","children":[["$","section",null,{"className":"sidebar-header","children":["$","img",null,{"className":"logo","src":"logo.svg","width":"22px","height":"20px","alt":"","role":"presentation"},["$","strong",null,{"children":"React Notes"}}],["$","section",null,{"className":"sidebar-menu","role":"menubar","children":"$","@1",null,{}],["$","@2",null,{"noteId":null,"children":"New"}}],["$","nav",null,{"children":["$","$3",null,{"fallback":["$","div",null,{"children":["$","ul",null,{"className":"notes-list skeleton-container","children":"$","li",null,{"className":"v-stack","children":"$","div",null,{"className":"sidebar-note-list-item skeleton","style":{"height":"5em"}}}],["$","li",null,{"className":"v-stack","children":"$","div",null,{"className":"sidebar-note-list-item skeleton","style":{"height":"5em"}}}],["$","li",null,{"className":"v-stack","children":"$","div",null,{"className":"sidebar-note-list-item skeleton","style":{"height":"5em"}}}}]}],"children":"@4"}]}]]}],["$","section","3",{"className":"col note-viewer","children":["$","$3",null,{"fallback":["$","div",null,{"className":"note skeleton-container","role":"progressbar","aria-busy":"true","children":"$","div",null,{"className":"note-header","children":["$","div",null,{"className":"note-title skeleton","style":{"height":"3rem","width":"65%","marginInline":"12px 1em"}},["$","div",null,{"className":"skeleton skeleton--button","style":{"width":"8em","height":"2.5em"}}}],["$","div",null,{"className":"note-preview","children":"$","div",null,{"className":"skeleton v-stack","style":{"height":"1.5em"}}],"$","div",null,{"className":"skeleton v-stack","style":{"height":"1.5em"}},"$","div",null,{"className":"skeleton v-stack","style":{"height":"1.5em"}},"$","div",null,{"className":"skeleton v-stack","style":{"height":"1.5em"}},["$","div",null,{"className":"skeleton v-stack","style":{"height":"1.5em"}}}]]}],"children":"@5"}]}]]}] M6:{"id":"./src/SidebarNote.client.js","chunks":"client6","name":""} J4:["$","ul",null,{"className":"notes-list","children":"$","li","4",{"children":["$","@6",null,{"id":4,"title":"Make a thing","expandedChildren":"$","p",null,{"className":"sidebar-note-excerpt","children":"It's very easy to make some words bold and other words italic with Markdown. You can even link to React's..."},"children":["$","header",null,{"className":"sidebar-note-header","children":["$","strong",null,{"children":"Make a thing"},["$","small",null,{"children":"8/12/20"}}]}]}],["$","li","3",{"children":["$","@6",null,{"id":3,"title":"I wrote this note today","expandedChildren":"$","p",null,{"className":"sidebar-note-excerpt","children":"It was an excellent note."},"children":["$","header",null,{"className":"sidebar-note-header","children":"$","strong",null,{"children":"I wrote this note today"}],["$","small",null,{"children":"5:04 AM"}}]}]}],["$","li","2",{"children":["$","@6",null,{"id":2,"title":"A note with a very long title because sometimes you need more words","expandedChildren":"$","p",null,{"className":"sidebar-note-excerpt","children":"You can write all kinds of amazing notes in this app! These note live on the server in the notes..."},"children":["$","header",null,{"className":"sidebar-note-header","children":"$","strong",null,{"children":"A note with a very long title because sometimes you need more words"}],["$","small",null,{"children":"3/6/20"}}]}]}],["$","li","1",{"children":["$","@6",null,{"id":1,"title":"Meeting Notes","expandedChildren":"$","p",null,{"className":"sidebar-note-excerpt","children":"This is an example note. It contains Markdown!"},"children":["$","header",null,{"className":"sidebar-note-header","children":"$","strong",null,{"children":"Meeting Notes"}],["$","small",null,{"children":"1/30/20"}}]}]}]]}] J5:["$","div",null,{"className":"note","children":"$","div",null,{"className":"note-header","children":["$","h1",null,{"className":"note-title","children":"I wrote this note today"},["$","div",null,{"className":"note-menu","role":"menubar","children":[["$","small",null,{"className":"note-updated-at","role":"status","children":"Last updated on ","22 Dec 2020 at 5:04 AM"}],["$","@2",null,{"noteId":3,"children":"Edit"}}]]}],["$","div",null,{"className":"note-preview","children":"$","div",null,{"className":"text-with-markdown","dangerouslySetInnerHTML":{"__html":"<p>It was an excellent note.</p>\n"}}}]]}] 部分適用されたReact.ReactNodeみたいなのが返ってくる
Client ComponentはM1みたいな感じで定義されて、$1みたいに参照される
!["$","img",null,{"className":"logo","src":"logo.svg","width":"22px","height":"20px","alt":"","role":"presentation"}](https://scrapbox.io/tosuke/"$","img",null,{"className":"logo","src":"logo.svg","width":"22px","height":"20px","alt":"","role":"presentation"}){kind=link}